import cx from 'classnames';
import React, {PropTypes as T} from 'react';


export class Action extends React.Component {
  static propTypes = {
    children: T.oneOf([
      T.array, T.object
    ])
  };

  render() {
    const {children, ...props} = this.props;
    return (
      <div className="weui_actionsheet_cell" {...props}>{children}</div>
    )
  }
}

export class ActionSheet extends React.Component {
  static propTypes = {
    onCancel: T.func,
    open: T.bool,
    children: T.oneOf([
      T.array, T.object
    ])
  };

  defaultProps = {
    onCancel(){
    },
    open: false
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div>
        <div className={cx("weui_mask_transition", {weui_fade_toggle: this.props.open})}
             style={{display: this.props.open ? 'block' : 'none'}} onClick={this.props.onCancel}></div>
        <div className={cx('weui_actionsheet', {weui_actionsheet_toggle: this.props.open})}>
          <div className="weui_actionsheet_menu">
            {this.props.children}
          </div>
          <div className="weui_actionsheet_action">
            <div className="weui_actionsheet_cell" onClick={this.props.onCancel}>取消</div>
          </div>
        </div>
      </div>
    )
  }
}
